<template>
	<view>
		<view style="margin-bottom: 10rpx;padding-bottom: 10rpx; background-color: #ffffff; z-index: 9999;">
		<view style=" padding: 15rpx; border-bottom: 1px solid #eee;">
		<u-row>
			<u-col span="4">
			    <um-dropdown :defaultIndex='0' @change="fnChange" rangeKey="label" :optionList="payOption"
			    	selectedItemStyle="color:2973F8;"></um-dropdown>
			</u-col>
			<u-col span="8">
				<u-search placeholder="请输入车牌号或车主信息" v-model="searchForm.keywords" @custom='searchInit'
					@search="searchInit">
				</u-search>
			   <!-- <um-dropdown :defaultIndex='0' @change="fnChange" rangeKey="label" :optionList="statusOption"
			    	selectedItemStyle="color:2973F8;"></um-dropdown> -->
			</u-col>
		</u-row>
		</view>
			
			<view>
				
			</view>
		</view>

		<view class="list">
			<view class="list-item" @click="toDetail(item.id)" v-for='item in list'>
				<view class="title">
					<view style="" class="title-left">
						<image src="../../static/park.png"></image>
						<label>{{item.vehicleNo}}</label>
					</view>
					<view class="title-right">￥{{item.chargeInfo.actualMoney}}</view>
					<view style="clear: both;"></view>
				</view>
				<view class="list-detail">
					<view><label style="width: 45%; float: left; display: inline-block;">记录人：{{item.creator}}</label><label style="width: 45%; float: right; display: inline-block;" v-show='item.driverName'>车主：{{item.driverName}}</label></view>
					<view>入场时间：{{item.createTime}}</view>
					<view>缴费方式：<label class="tag pay" v-show='item.chargeInfo.status==10'>已支付</label>
					<label class="tag nopay" v-show='item.chargeInfo.status!=10'>未支付</label>
					</view>
				</view>


			</view>

		
		</view>
		<view style=" padding: 15rpx;">
			<u-loadmore :status="loadingStatus" />

		</view>
		<u-no-network></u-no-network>
	</view>
</template>
<style>
	.list {
		padding: 20rpx;
	}

	.list-item {
		border-bottom: 2px solid #eee;
		margin-bottom: 10rpx;
	}

	.list-detail {
		padding: 15rpx;
	}

	.list-detail view {
		display: block;
		height: 60rpx;
		line-height: 60rpx;
		font-size: 35rpx;
	}

	.title image {
		width: 100rpx;
		height: 100rpx;
	}

	.title .title-left {
		float: left;
		width: 60%;
		height: 100rpx;

	}

	.title .title-left label {
		position: relative;
		top: -35rpx
	}

	.title .title-right {
		font-size: 50rpx;
		font-weight: bold;
		padding-right: 15rpx;
		float: right;
		width: 35%;
		height: 100rpx;
		line-height: 100rpx;
		text-align: right;
	}

	.tag {
		display: inline-block;
		padding: 1rpx 10rpx;
		border-radius: 10rpx;
	}

	.nopay {
		background-color: orange;
		color: white;
	}

	.pay {
		background-color: #5ac725;
		color: white;
	}
</style>
<script>
	import service from '@/util/service.js'
	
	export default {
		data() {
			return {

				optionVal: '', // 选中列表的值
					statusOption: [ // 列表数据
					{
						label: '离场状态',
						value: '',
					},
					{
						label: '已离场',
						value: '1',
					},
					{
						label: '未离场',
						value: '2',
					},
					],
				payOption: [ // 列表数据
					{
						label: '支付状态',
						value: '',
					},
					{
						label: '已支付',
						value: '10',
					},
					{
						label: '未支付',
						value: '0',
					}
					
				],
				loadingStatus: "loadmore",
		
				searchForm: {
					ChargeStatus: "",
					
					keywords: "",
					pageModel: {
						page: 1,
						rows: 10
					}
				},
				list:[],
				areaList: [],
				clueStateList: [],
				brandList: []
			}
		},
		onShow:function(){
				this.searchInit();
		},
		onLoad: function() {
			// this.search();
			// this.initDict();
		},
		onPullDownRefresh() {
			this.searchInit();
		
		},
		onReachBottom() {
			var that = this;
			this.loadingStatus = 'loading';
			
			this.searchForm.pageModel.page = ++this.searchForm.pageModel.page;
			this.search(1, function(res) {
				if (res.rows.length < that.searchForm.pageModel.rows) {
					console.log("nomore")
					that.loadingStatus = "nomore";
				} else {
					console.log("loadmore")
					that.loadingStatus = "loadmore";
				}
			
			});
		},
		created:function(){
		this.getList();	
		},
		methods: {
			toDetail:function(id){
				uni.navigateTo({
					url:"/pages/orderDetail/orderDetail?id="+id
				})
				
			},
	
			 // 列表选中时触发事件，带出选中的值
			            fnChange(e) {
							console.log("fnChange=>",JSON.stringify( e));
			                this.searchForm.ChargeStatus = e.value
							this.search();
			            },
			searchInit: function() {
				this.searchForm.pageModel.page = 1;
			
				this.search(null, function(res) {
					uni.stopPullDownRefresh();
			
				})
			},
			search: function(type, fc) {
				var that = this;
				var model = JSON.parse(JSON.stringify(this.searchForm));
				
				service.postJson('/biz/entrance/query', model, function(res) {
					// that.list = res.Rows;
					if (type) {
						for (var i = 0; i < res.rows.length; i++) {
							that.list.push(res.rows[i]);
			
						}
					} else {
						that.list = res.rows;
					}
			
					if (fc) {
						fc(res);
					}
				})
			}
		}
	}
</script>

<style>

</style>